<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Contact Form | Gentelella Alela! by Colorlib</title>    <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
    <script type="module" src="/src/main-minimal-modern.js"></script>
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
            </div>

            <div class="clearfix"></div>

            <!-- menu profile quick info -->
            <div class="profile clearfix">
              <div class="profile_pic">
                <img src="images/img.jpg" alt="..." class="img-circle profile_img">
              </div>
              <div class="profile_info">
                <span>Welcome,</span>
                <h4>John Doe</h4>
              </div>
            </div>
            <!-- /menu profile quick info -->

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="index.html">Dashboard 1</a></li>
                      <li><a href="index2.html">Dashboard 2</a></li>
                      <li><a href="index3.html">Dashboard 3</a></li><li><a href="index4.html">Dashboard 4</a></li>
                      <li><a href="index3.html">Dashboard 3</a></li>
                    </ul>
                  <li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="form.html">General Form</a></li>
                      <li><a href="form_advanced.html">Advanced Components</a></li>
                      <li><a href="form_validation.html">Form Validation</a></li>
                      <li><a href="form_wizards.html">Form Wizard</a></li>
                      <li><a href="form_upload.html">Form Upload</a></li>
                      <li><a href="form_buttons.html">Form Buttons</a></li>
                    </ul>
                  <li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="general_elements.html">General Elements</a></li>
                      <li><a href="media_gallery.html">Media Gallery</a></li>
                      <li><a href="typography.html">Typography</a></li>
                      <li><a href="icons.html">Icons</a></li>

                      <li><a href="widgets.html">Widgets</a></li>
                      <li><a href="invoice.html">Invoice</a></li>
                      <li><a href="inbox.html">Inbox</a></li>
                      <li><a href="calendar.html">Calendar</a></li>
                    </ul>
                  <li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="tables.html">Tables</a></li>
                      <li><a href="tables_dynamic.html">Table Dynamic</a></li>
                    </ul>
                  <li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="chartjs.html">Chart JS</a></li>
                      <li><a href="chartjs2.html">Chart JS2</a></li>
                      <li><a href="chart3.html">Chart JS3</a></li>
                      <li><a href="echarts.html">ECharts</a></li>
                      <li><a href="other_charts.html">Other Charts</a></li>
                    </ul>
                  <li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
                      <li><a href="fixed_footer.html">Fixed Footer</a></li>
                    </ul>
                </ul>
              </div>
              <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                  <li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="e_commerce.html">E-commerce</a></li>
                      <li><a href="projects.html">Projects</a></li>
                      <li><a href="project_detail.html">Project Detail</a></li>
                      <li><a href="contacts.html">Contacts</a></li>
                      <li><a href="profile.html">Profile</a></li>
                    </ul>
                  <li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a href="page_403.html">403 Error</a></li>
                      <li><a href="page_404.html">404 Error</a></li>
                      <li><a href="page_500.html">500 Error</a></li>
                      <li><a href="plain_page.html">Plain Page</a></li>
                      <li><a href="login.html">Login Page</a></li>
                      <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    </ul>
                  <li><a><i class="fas fa-sitemap"></i> Multilevel Menu <span class="fas fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                        <li><a href="#level1_1">Level One</a></li>
                        <li><a>Level One<span class="fas fa-chevron-down"></span></a>
                          <ul class="nav child_menu">
                            <li class="sub_menu"><a href="level2.html">Level Two</a>
                            <li><a href="#level2_1">Level Two</a>
                            <li><a href="#level2_2">Level Two</a>
                          </ul>
                        <li><a href="#level1_2">Level One</a></li>
                    </ul>
                  <li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a></li>
                </ul>
              </div>

            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
                <span class="fas fa-cog" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
                <span class="fas fa-expand" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
                <span class="fas fa-eye-slash" aria-hidden="true"></span>
              </a>
              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
                <span class="fas fa-power-off" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
            <div class="nav_menu">
                <div class="nav toggle">
                  <a id="menu_toggle"><i class="fas fa-bars"></i></a>
                </div>
                <nav class="nav navbar-nav">
                <ul class="navbar-right">
                  <li class="nav-item dropdown open" style="padding-left: 15px;">
                    <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      <img src="images/img.jpg" alt="">John Doe
                    </a>
                    <div class="dropdown-menu dropdown-usermenu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item"  href="javascript:;"> Profile</a>
                        <a class="dropdown-item"  href="javascript:;">
                          <span class="badge bg-danger float-end">50%</span>
                          <span>Settings</span>
                        </a>
                    <a class="dropdown-item"  href="javascript:;">Help</a>
                      <a class="dropdown-item"  href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
                    </div>
  
                  <li role="presentation" class="nav-item dropdown open">
                    <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="fas fa-envelope"></i>
                      <span class="badge bg-green">6</span>
                    </a>
                    <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <a class="dropdown-item">
                          <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                          <span>
                            <span>John Smith</span>
                            <span class="time">3 mins ago</span>
                          </span>
                          <span class="message">
                            Film festivals used to be do-or-die moments for movie makers. They were where...
                          </span>
                        </a>
                      <li class="nav-item">
                        <div class="text-center">
                          <a class="dropdown-item">
                            <strong>See All Alerts</strong>
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </div>
                    </ul>
                </ul>
              </nav>
            </div>
          </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Contact Management <small>Team Directory</small></h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5 mb-3 float-end top_search">
                  <div class="input-group search-bar-fix">
                    <input type="text" class="form-control" id="contactSearch" placeholder="Search contacts...">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchContacts()">
                      <i class="fas fa-search"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="clearfix"></div>

            <!-- Contact Statistics -->
            <div class="row mb-4">
              <div class="col-md-3 col-sm-6">
                <div class="x_panel stats-card">
                  <div class="x_content text-center">
                    <div class="stat-icon">
                      <i class="fas fa-users text-primary"></i>
                    </div>
                    <h3 class="stat-number text-primary">20</h3>
                    <p class="stat-label">Total Contacts</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="x_panel stats-card">
                  <div class="x_content text-center">
                    <div class="stat-icon">
                      <i class="fas fa-user-tie text-success"></i>
                    </div>
                    <h3 class="stat-number text-success">10</h3>
                    <p class="stat-label">Team Members</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="x_panel stats-card">
                  <div class="x_content text-center">
                    <div class="stat-icon">
                      <i class="fas fa-handshake text-warning"></i>
                    </div>
                    <h3 class="stat-number text-warning">6</h3>
                    <p class="stat-label">Clients</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="x_panel stats-card">
                  <div class="x_content text-center">
                    <div class="stat-icon">
                      <i class="fas fa-building text-info"></i>
                    </div>
                    <h3 class="stat-number text-info">4</h3>
                    <p class="stat-label">Vendors</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Contact Filters and Actions -->
            <div class="row mb-4">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_content">
                    <div class="row align-items-center">
                      <div class="col-md-8">
                        <div class="contact-filters">
                          <div class="btn-group me-3" role="group">
                            <input type="radio" class="btn-check" name="contactType" id="all" autocomplete="off" checked>
                            <label class="btn btn-outline-primary" for="all">All Contacts</label>
                            
                            <input type="radio" class="btn-check" name="contactType" id="team" autocomplete="off">
                            <label class="btn btn-outline-primary" for="team">Team</label>
                            
                            <input type="radio" class="btn-check" name="contactType" id="clients" autocomplete="off">
                            <label class="btn btn-outline-primary" for="clients">Clients</label>
                            
                            <input type="radio" class="btn-check" name="contactType" id="vendors" autocomplete="off">
                            <label class="btn btn-outline-primary" for="vendors">Vendors</label>
                          </div>
                          
                          <select class="form-select d-inline-block" style="width: auto;" onchange="filterByDepartment(this.value)">
                            <option value="">All Departments</option>
                            <option value="development">Development</option>
                            <option value="design">Design</option>
                            <option value="marketing">Marketing</option>
                            <option value="sales">Sales</option>
                            <option value="support">Support</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-4 text-end">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addContactModal">
                          <i class="fas fa-plus me-2"></i>Add Contact
                        </button>
                        <div class="btn-group ms-2">
                          <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-h"></i>
                          </button>
                          <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-download me-2"></i>Export Contacts</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-upload me-2"></i>Import Contacts</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>Settings</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Alphabet Filter -->
            <div class="row mb-4">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_content">
                    <div class="alphabet-filter text-center">
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('all')">All</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('A')">A</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('B')">B</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('C')">C</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('D')">D</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('E')">E</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('F')">F</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('G')">G</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('H')">H</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('I')">I</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('J')">J</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('K')">K</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('L')">L</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('M')">M</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('N')">N</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('O')">O</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('P')">P</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('Q')">Q</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('R')">R</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('S')">S</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('T')">T</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('U')">U</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('V')">V</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('W')">W</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('X')">X</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('Y')">Y</button>
                      <button class="btn btn-sm btn-outline-secondary me-1 mb-1" onclick="filterByLetter('Z')">Z</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Contact Cards -->
            <div class="row" id="contactsContainer">

            </div>
            
            <!-- Pagination -->
            <div class="row">
              <div class="col-md-12">
                <nav aria-label="Contact pagination">
                  <ul class="pagination justify-content-center" id="contactPagination">
                    <li class="page-item">
                      <a class="page-link" href="#" onclick="previousPage()">
                        <i class="fas fa-chevron-left"></i> Previous
                      </a>
                    <li class="page-item active"><a class="page-link" href="#" onclick="goToPage(1)">1</a></li>
                    <li class="page-item"><a class="page-link" href="#" onclick="goToPage(2)">2</a></li>
                    <li class="page-item"><a class="page-link" href="#" onclick="goToPage(3)">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#" onclick="nextPage()">
                        Next <i class="fas fa-chevron-right"></i>
                      </a>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="float-end">
            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>

    <!-- Add Contact Modal -->
    <div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addContactModalLabel">
              <i class="fas fa-user-plus me-2"></i>Add New Contact
            </h5>
            <button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="addContactForm">
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="firstName" class="form-label">First Name *</label>
                    <input type="text" class="form-control" id="firstName" required>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="lastName" class="form-label">Last Name *</label>
                    <input type="text" class="form-control" id="lastName" required>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="email" class="form-label">Email *</label>
                    <input type="email" class="form-control" id="email" required>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="tel" class="form-control" id="phone">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="jobTitle" class="form-label">Job Title</label>
                    <input type="text" class="form-control" id="jobTitle">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="department" class="form-label">Department</label>
                    <select class="form-select" id="department">
                      <option value="">Select Department</option>
                      <option value="development">Development</option>
                      <option value="design">Design</option>
                      <option value="marketing">Marketing</option>
                      <option value="sales">Sales</option>
                      <option value="support">Support</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="company" class="form-label">Company</label>
                    <input type="text" class="form-control" id="company">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="mb-3">
                    <label for="contactType" class="form-label">Contact Type</label>
                    <select class="form-select" id="contactType">
                      <option value="team">Team Member</option>
                      <option value="client">Client</option>
                      <option value="vendor">Vendor</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="mb-3">
                <label for="address" class="form-label">Address</label>
                <textarea class="form-control" id="address" rows="2"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              <i class="fas fa-times me-2"></i>Cancel
            </button>
            <button type="button" class="btn btn-primary" onclick="saveContact()">
              <i class="fas fa-save me-2"></i>Save Contact
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Contact Details Modal -->
    <div class="modal fade" id="contactDetailsModal" tabindex="-1" aria-labelledby="contactDetailsModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="contactDetailsModalLabel">
              <i class="fas fa-user me-2"></i>Contact Details
            </h5>
            <button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" id="contactDetailsContent">
            <!-- Contact details will be populated here -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-warning" onclick="editContact()">
              <i class="fas fa-edit me-2"></i>Edit Contact
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript -->
    <script>
      // Sample contact data
      const contacts = [
        {
          id: 1,
          firstName: "Sarah",
          lastName: "Johnson",
          email: "sarah.johnson@company.com",
          phone: "+1 (555) 123-4567",
          jobTitle: "Senior Frontend Developer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "123 Tech Street, San Francisco, CA",
          avatar: "images/user.png",
          rating: 4.8
        },
        {
          id: 2,
          firstName: "Michael",
          lastName: "Chen",
          email: "michael.chen@company.com",
          phone: "+1 (555) 234-5678",
          jobTitle: "UX Designer",
          department: "design",
          company: "TechCorp Industries",
          type: "team",
          address: "456 Design Ave, San Francisco, CA",
          avatar: "images/img.jpg",
          rating: 4.9
        },
        {
          id: 3,
          firstName: "Emily",
          lastName: "Rodriguez",
          email: "emily.rodriguez@client.com",
          phone: "+1 (555) 345-6789",
          jobTitle: "Marketing Director",
          department: "marketing",
          company: "Client Solutions LLC",
          type: "client",
          address: "789 Business Blvd, New York, NY",
          avatar: "images/user.png",
          rating: 4.5
        },
        {
          id: 4,
          firstName: "David",
          lastName: "Wilson",
          email: "david.wilson@company.com",
          phone: "+1 (555) 456-7890",
          jobTitle: "Backend Developer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "321 Code Lane, Austin, TX",
          avatar: "images/img.jpg",
          rating: 4.7
        },
        {
          id: 5,
          firstName: "Lisa",
          lastName: "Thompson",
          email: "lisa.thompson@vendor.com",
          phone: "+1 (555) 567-8901",
          jobTitle: "Account Manager",
          department: "sales",
          company: "Vendor Partners Inc",
          type: "vendor",
          address: "654 Sales Street, Chicago, IL",
          avatar: "images/user.png",
          rating: 4.3
        },
        {
          id: 6,
          firstName: "James",
          lastName: "Anderson",
          email: "james.anderson@company.com",
          phone: "+1 (555) 678-9012",
          jobTitle: "DevOps Engineer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "987 Cloud Drive, Seattle, WA",
          avatar: "images/img.jpg",
          rating: 4.6
        },
        {
          id: 7,
          firstName: "Amanda",
          lastName: "Davis",
          email: "amanda.davis@company.com",
          phone: "+1 (555) 789-0123",
          jobTitle: "UI Designer",
          department: "design",
          company: "TechCorp Industries",
          type: "team",
          address: "111 Creative Blvd, Los Angeles, CA",
          avatar: "images/user.png",
          rating: 4.4
        },
        {
          id: 8,
          firstName: "Robert",
          lastName: "Martinez",
          email: "robert.martinez@client.com",
          phone: "+1 (555) 890-1234",
          jobTitle: "Project Manager",
          department: "marketing",
          company: "Global Marketing Inc",
          type: "client",
          address: "222 Project Way, Denver, CO",
          avatar: "images/img.jpg",
          rating: 4.7
        },
        {
          id: 9,
          firstName: "Jessica",
          lastName: "Brown",
          email: "jessica.brown@vendor.com",
          phone: "+1 (555) 901-2345",
          jobTitle: "Sales Representative",
          department: "sales",
          company: "Business Solutions Ltd",
          type: "vendor",
          address: "333 Commerce St, Miami, FL",
          avatar: "images/user.png",
          rating: 4.2
        },
        {
          id: 10,
          firstName: "Kevin",
          lastName: "Taylor",
          email: "kevin.taylor@company.com",
          phone: "+1 (555) 012-3456",
          jobTitle: "Full Stack Developer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "444 Stack Ave, Portland, OR",
          avatar: "images/img.jpg",
          rating: 4.8
        },
        {
          id: 11,
          firstName: "Michelle",
          lastName: "Garcia",
          email: "michelle.garcia@client.com",
          phone: "+1 (555) 123-4560",
          jobTitle: "Brand Manager",
          department: "marketing",
          company: "Creative Brands Co",
          type: "client",
          address: "555 Brand Lane, Nashville, TN",
          avatar: "images/user.png",
          rating: 4.6
        },
        {
          id: 12,
          firstName: "Christopher",
          lastName: "Lee",
          email: "christopher.lee@company.com",
          phone: "+1 (555) 234-5601",
          jobTitle: "QA Engineer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "666 Quality St, Boston, MA",
          avatar: "images/img.jpg",
          rating: 4.5
        },
        {
          id: 13,
          firstName: "Nicole",
          lastName: "White",
          email: "nicole.white@vendor.com",
          phone: "+1 (555) 345-6012",
          jobTitle: "Technical Support",
          department: "support",
          company: "Support Systems Inc",
          type: "vendor",
          address: "777 Help Desk Dr, Phoenix, AZ",
          avatar: "images/user.png",
          rating: 4.4
        },
        {
          id: 14,
          firstName: "Anthony",
          lastName: "Harris",
          email: "anthony.harris@company.com",
          phone: "+1 (555) 456-7012",
          jobTitle: "Product Manager",
          department: "design",
          company: "TechCorp Industries",
          type: "team",
          address: "888 Product Plaza, San Diego, CA",
          avatar: "images/img.jpg",
          rating: 4.9
        },
        {
          id: 15,
          firstName: "Rachel",
          lastName: "Clark",
          email: "rachel.clark@client.com",
          phone: "+1 (555) 567-8012",
          jobTitle: "Content Manager",
          department: "marketing",
          company: "Content Creators LLC",
          type: "client",
          address: "999 Content Way, Atlanta, GA",
          avatar: "images/user.png",
          rating: 4.3
        },
        {
          id: 16,
          firstName: "Steven",
          lastName: "Lewis",
          email: "steven.lewis@vendor.com",
          phone: "+1 (555) 678-9012",
          jobTitle: "Business Analyst",
          department: "sales",
          company: "Analytics Pro Ltd",
          type: "vendor",
          address: "101 Analysis Ave, Dallas, TX",
          avatar: "images/img.jpg",
          rating: 4.6
        },
        {
          id: 17,
          firstName: "Jennifer",
          lastName: "Walker",
          email: "jennifer.walker@company.com",
          phone: "+1 (555) 789-0123",
          jobTitle: "Data Scientist",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "202 Data Dr, Minneapolis, MN",
          avatar: "images/user.png",
          rating: 4.8
        },
        {
          id: 18,
          firstName: "Daniel",
          lastName: "Hall",
          email: "daniel.hall@client.com",
          phone: "+1 (555) 890-1234",
          jobTitle: "Creative Director",
          department: "design",
          company: "Design Studio Pro",
          type: "client",
          address: "303 Creative Circle, Las Vegas, NV",
          avatar: "images/img.jpg",
          rating: 4.7
        },
        {
          id: 19,
          firstName: "Angela",
          lastName: "Allen",
          email: "angela.allen@vendor.com",
          phone: "+1 (555) 901-2345",
          jobTitle: "HR Specialist",
          department: "support",
          company: "Human Resources Plus",
          type: "vendor",
          address: "404 People Place, Salt Lake City, UT",
          avatar: "images/user.png",
          rating: 4.2
        },
        {
          id: 20,
          firstName: "Ryan",
          lastName: "Young",
          email: "ryan.young@company.com",
          phone: "+1 (555) 012-3456",
          jobTitle: "Mobile Developer",
          department: "development",
          company: "TechCorp Industries",
          type: "team",
          address: "505 Mobile Way, Charlotte, NC",
          avatar: "images/img.jpg",
          rating: 4.5
        }
      ];

      let filteredContacts = [...contacts];
      let currentPage = 1;
      const contactsPerPage = 6;

      document.addEventListener('DOMContentLoaded', function() {
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Load contacts
        displayContacts();
        
        // Add event listeners for filter buttons
        document.querySelectorAll('input[name="contactType"]').forEach(radio => {
          radio.addEventListener('change', filterContacts);
        });

        // Add search functionality
        document.getElementById('contactSearch').addEventListener('input', searchContacts);
      });

      function displayContacts() {
        const container = document.getElementById('contactsContainer');
        const startIndex = (currentPage - 1) * contactsPerPage;
        const endIndex = startIndex + contactsPerPage;
        const contactsToShow = filteredContacts.slice(startIndex, endIndex);

        container.innerHTML = '';

        contactsToShow.forEach(contact => {
          const contactCard = createContactCard(contact);
          container.appendChild(contactCard);
        });

        updatePagination();
      }

      function createContactCard(contact) {
        const col = document.createElement('div');
        col.className = 'col-md-4 col-sm-6 mb-4';
        
        col.innerHTML = `
          <div class="contact-card">
            <div class="contact-header">
              <img src="${contact.avatar}" alt="${contact.firstName} ${contact.lastName}" class="contact-avatar">
              <div class="contact-type-badge">
                <span class="badge bg-${getTypeColor(contact.type)}">${capitalizeFirst(contact.type)}</span>
              </div>
            </div>
            <div class="contact-body">
              <h5 class="contact-name">${contact.firstName} ${contact.lastName}</h5>
              <p class="contact-title">${contact.jobTitle}</p>
              <div class="contact-info">
                <div class="contact-info-item">
                  <i class="fas fa-envelope text-primary"></i>
                  <span>${contact.email}</span>
                </div>
                <div class="contact-info-item">
                  <i class="fas fa-phone text-success"></i>
                  <span>${contact.phone}</span>
                </div>
                <div class="contact-info-item">
                  <i class="fas fa-building text-info"></i>
                  <span>${contact.company}</span>
                </div>
              </div>
              <div class="contact-rating">
                <span class="rating-stars">${generateStars(contact.rating)}</span>
                <span class="rating-value">${contact.rating}</span>
              </div>
            </div>
            <div class="contact-actions">
              <button class="btn btn-outline-primary btn-sm" onclick="viewContactDetails(${contact.id})">
                <i class="fas fa-eye"></i> View
              </button>
              <button class="btn btn-outline-success btn-sm" onclick="contactPerson(${contact.id})">
                <i class="fas fa-comment"></i> Message
              </button>
              <button class="btn btn-outline-info btn-sm" onclick="callContact(${contact.id})">
                <i class="fas fa-phone"></i> Call
              </button>
            </div>
          </div>
        `;
        
        return col;
      }

      function getTypeColor(type) {
        const colors = {
          'team': 'success',
          'client': 'primary',
          'vendor': 'warning'
        };
        return colors[type] || 'secondary';
      }

      function capitalizeFirst(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      }

      function generateStars(rating) {
        const fullStars = Math.floor(rating);
        const halfStar = rating % 1 >= 0.5 ? 1 : 0;
        const emptyStars = 5 - fullStars - halfStar;
        
        let stars = '';
        for (let i = 0; i < fullStars; i++) {
          stars += '<i class="fas fa-star text-warning"></i>';
        }
        if (halfStar) {
          stars += '<i class="fas fa-star-half-alt text-warning"></i>';
        }
        for (let i = 0; i < emptyStars; i++) {
          stars += '<i class="far fa-star text-warning"></i>';
        }
        
        return stars;
      }

      function filterContacts() {
        const selectedType = document.querySelector('input[name="contactType"]:checked').id;
        const departmentFilter = document.querySelector('select[onchange="filterByDepartment(this.value)"]').value;
        
        filteredContacts = contacts.filter(contact => {
          const typeMatch = selectedType === 'all' || contact.type === selectedType;
          const deptMatch = !departmentFilter || contact.department === departmentFilter;
          return typeMatch && deptMatch;
        });
        
        currentPage = 1;
        displayContacts();
      }

      function filterByDepartment(department) {
        filterContacts();
      }

      function filterByLetter(letter) {
        if (letter === 'all') {
          filteredContacts = [...contacts];
        } else {
          filteredContacts = contacts.filter(contact => 
            contact.lastName.charAt(0).toUpperCase() === letter
          );
        }
        
        currentPage = 1;
        displayContacts();
        
        // Update active button
        document.querySelectorAll('.alphabet-filter .btn').forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');
      }

      function searchContacts() {
        const searchTerm = document.getElementById('contactSearch').value.toLowerCase();
        
        filteredContacts = contacts.filter(contact => 
          contact.firstName.toLowerCase().includes(searchTerm) ||
          contact.lastName.toLowerCase().includes(searchTerm) ||
          contact.email.toLowerCase().includes(searchTerm) ||
          contact.jobTitle.toLowerCase().includes(searchTerm) ||
          contact.company.toLowerCase().includes(searchTerm)
        );
        
        currentPage = 1;
        displayContacts();
      }

      function updatePagination() {
        const totalPages = Math.ceil(filteredContacts.length / contactsPerPage);
        const pagination = document.getElementById('contactPagination');
        
        pagination.innerHTML = '';
        
        // Previous button
        const prevLi = document.createElement('li');
        prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
        prevLi.innerHTML = `<a class="page-link" href="#" onclick="previousPage()"><i class="fas fa-chevron-left"></i> Previous</a>`;
        pagination.appendChild(prevLi);
        
        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
          const pageLi = document.createElement('li');
          pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
          pageLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
          pagination.appendChild(pageLi);
        }
        
        // Next button
        const nextLi = document.createElement('li');
        nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
        nextLi.innerHTML = `<a class="page-link" href="#" onclick="nextPage()">Next <i class="fas fa-chevron-right"></i></a>`;
        pagination.appendChild(nextLi);
      }

      function previousPage() {
        if (currentPage > 1) {
          currentPage--;
          displayContacts();
        }
      }

      function nextPage() {
        const totalPages = Math.ceil(filteredContacts.length / contactsPerPage);
        if (currentPage < totalPages) {
          currentPage++;
          displayContacts();
        }
      }

      function goToPage(page) {
        currentPage = page;
        displayContacts();
      }

      function viewContactDetails(contactId) {
        const contact = contacts.find(c => c.id === contactId);
        if (contact) {
          const modalContent = document.getElementById('contactDetailsContent');
          
          // Sanitize all user-controlled data to prevent XSS attacks
          const safeFirstName = window.sanitizeText ? window.sanitizeText(contact.firstName) : contact.firstName;
          const safeLastName = window.sanitizeText ? window.sanitizeText(contact.lastName) : contact.lastName;
          const safeJobTitle = window.sanitizeText ? window.sanitizeText(contact.jobTitle) : contact.jobTitle;
          const safeEmail = window.sanitizeText ? window.sanitizeText(contact.email) : contact.email;
          const safePhone = window.sanitizeText ? window.sanitizeText(contact.phone) : contact.phone;
          const safeCompany = window.sanitizeText ? window.sanitizeText(contact.company) : contact.company;
          const safeAddress = window.sanitizeText ? window.sanitizeText(contact.address) : contact.address;
          
          const contactDetailsHtml = `
            <div class="row">
              <div class="col-md-4 text-center">
                <img src="${contact.avatar}" alt="${safeFirstName} ${safeLastName}" class="contact-detail-avatar mb-3">
                <h4>${safeFirstName} ${safeLastName}</h4>
                <p class="text-muted">${safeJobTitle}</p>
                <div class="rating mb-3">
                  ${generateStars(contact.rating)} <span class="ms-2">${contact.rating}/5.0</span>
                </div>
              </div>
              <div class="col-md-8">
                <h6>Contact Information</h6>
                <table class="table table-borderless">
                  <tr><td><strong>Email:</strong></td><td>${safeEmail}</td></tr>
                  <tr><td><strong>Phone:</strong></td><td>${safePhone}</td></tr>
                  <tr><td><strong>Company:</strong></td><td>${safeCompany}</td></tr>
                  <tr><td><strong>Department:</strong></td><td>${capitalizeFirst(contact.department)}</td></tr>
                  <tr><td><strong>Type:</strong></td><td><span class="badge bg-${getTypeColor(contact.type)}">${capitalizeFirst(contact.type)}</span></td></tr>
                  <tr><td><strong>Address:</strong></td><td>${safeAddress}</td></tr>
                </table>
              </div>
            </div>
          `;
          
          // Use safe innerHTML setter if available, otherwise sanitize manually
          if (window.setSafeInnerHTML) {
            window.setSafeInnerHTML(modalContent, contactDetailsHtml);
          } else {
            modalContent.innerHTML = contactDetailsHtml; // Fallback for development
          }
          
          const modal = new bootstrap.Modal(document.getElementById('contactDetailsModal'));
          modal.show();
        }
      }

      function saveContact() {
        // Get form data
        const form = document.getElementById('addContactForm');
        const formData = new FormData(form);
        
        // Validate required fields
        if (!document.getElementById('firstName').value || !document.getElementById('lastName').value || !document.getElementById('email').value) {
          alert('Please fill in all required fields.');
          return;
        }
        
        // Create new contact object
        const newContact = {
          id: contacts.length + 1,
          firstName: document.getElementById('firstName').value,
          lastName: document.getElementById('lastName').value,
          email: document.getElementById('email').value,
          phone: document.getElementById('phone').value || 'N/A',
          jobTitle: document.getElementById('jobTitle').value || 'N/A',
          department: document.getElementById('department').value || 'general',
          company: document.getElementById('company').value || 'N/A',
          type: document.getElementById('contactType').value,
          address: document.getElementById('address').value || 'N/A',
          avatar: 'images/user.png',
          rating: 4.0
        };
        
        // Add to contacts array
        contacts.push(newContact);
        filteredContacts = [...contacts];
        
        // Refresh display
        displayContacts();
        
        // Close modal and reset form
        const modal = bootstrap.Modal.getInstance(document.getElementById('addContactModal'));
        modal.hide();
        form.reset();
        
        alert('Contact added successfully!');
      }

      function contactPerson(contactId) {
        const contact = contacts.find(c => c.id === contactId);
        alert(`Messaging ${contact.firstName} ${contact.lastName} at ${contact.email}`);
      }

      function callContact(contactId) {
        const contact = contacts.find(c => c.id === contactId);
        alert(`Calling ${contact.firstName} ${contact.lastName} at ${contact.phone}`);
      }

      function editContact() {
        alert('Edit contact functionality would open the edit form.');
      }
    </script>

    <style>
      .stats-card {
        transition: transform 0.3s ease;
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      }

      .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      }

      .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
      }

      .stat-number {
        font-size: 2rem;
        font-weight: bold;
        margin: 0;
      }

      .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
        margin: 0;
      }

      .contact-card {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid #e9ecef;
      }

      .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      }

      .contact-header {
        text-align: center;
        position: relative;
        margin-bottom: 15px;
      }

      .contact-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }

      .contact-type-badge {
        position: absolute;
        top: 0;
        right: 0;
      }

      .contact-name {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 5px;
        color: #2c3e50;
      }

      .contact-title {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 15px;
      }

      .contact-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.85rem;
      }

      .contact-info-item i {
        width: 20px;
        margin-right: 8px;
      }

      .contact-rating {
        text-align: center;
        margin: 15px 0;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
      }

      .rating-value {
        font-weight: bold;
        color: #495057;
      }

      .contact-actions {
        display: flex;
        gap: 5px;
        justify-content: center;
      }

      .contact-actions .btn {
        flex: 1;
        font-size: 0.8rem;
      }

      .alphabet-filter .btn {
        min-width: 40px;
      }

      .alphabet-filter .btn.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
      }

      .contact-detail-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 5px solid #f8f9fa;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      }

      .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 0.5rem 0.5rem 0 0;
      }

      .modal-header .btn-btn-close {
        filter: invert(1);
      }

      .x_panel {
        border-radius: 10px;
        border: none;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
      }

      .btn-check:checked + .btn-outline-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
      }
    </style>
  </body>
</html>